<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /*
            类式组件的定义
            *React提供了一个React.Component类 这个类中提供了非常多的组件功能
            *定义类式组件 使用class定义一个类 并继承了React.Component类
            *类式组件一定要定义render方法 render 方法会在类式组件被使用的时候执行 并返回当前组件的虚拟DOM
            *类式组件的执行过程
            1.当类式组件被使用的时候 首先找到对应的class定义的类 然后实例化它  得到当前类式组件的实例化对象(组件实例化对象 也称组件实例)
            2.调用当前实例化组件对象(组件实例)的render方法 得到虚拟DOM
            *render方法中的this指向当前的组件实例
      */

      class App extends React.Component {
        //类式组件一定要定义render方法  render方法会在类是组件被使用的时候执行 并返回当前组件的虚拟DOM
        render() {
          console.log(this); //原型对象上的方法的this都是指向组件实例(原型方法基本上都是实例化对象调用的)
          return <div>App组件</div>;
          return <div>App组件</div>;
        }
      }
      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
